<template>
  <div class="box3">
    <div class="warp">
      <div class="content" v-for="(item,index) in concernInfo" :key="index">
        <div class="yuan1">
          <img :src="item.images" alt />

          <span class="shijian">{{item.time}}</span>
        </div>
        <p class="aothers">{{item.author}}</p>
        <p class="citys">{{item.city}}</p>
        <div class="text">
          <p>{{item.text}}</p>
        </div>
        <div class="big">
          <div class="big-img1">
            <img :src="item.img3" alt />
          </div>
          <div class="big-img1">
            <img :src="item.img3" alt />
          </div>
          <div class="big-img1">
            <img :src="item.img3" alt />
          </div>
          <div class="big-img1">
            <img :src="item.img3" alt />
          </div>
        </div>
        <div class="Icon">
           <div class="add">
               <span class='cicon iconfont jia' @click="GouFabu">&#xe61f;</span>
           </div>
          <span class="icon iconfont IconXin" v-if="flagsConcern" @click="clickIconXin">&#xe85c;</span>
          <span class="icon iconfont IconXin" v-else @click="clickIconXin2">&#xe602;</span>
          <p class="IconXin-p1">403</p>
          <span class="icon iconfont IconPinglun">&#xe603;</span>
          <p class="IconPinglun-p2">26</p>
        </div>
      </div>
      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      concernInfo: [],
      flagsConcern: false
    };
  },
  mounted() {
    if (localStorage.getItem("flagsConcern")) {
      this.flagsConcern = localStorage.getItem("flagsConcern");
    }
    this.api.GetcCncern().then(data => {
      //console.log(data.data.Concern);
      this.concernInfo = data.data.Concern;
    });
  },
  methods: {
    //发布
    GouFabu(){
      this.$router.push('/release')
    },
    clickIconXin() {
      this.flagsConcern = !this.flagsConcern;
      localStorage.setItem("flagsConcern", this.flagsConcern);
    },
    clickIconXin2() {
      this.flagsConcern = !this.flagsConcern;
      localStorage.setItem("flagsConcern", this.flagsConcern);
    }
  }
  
}


</script>

<style lang="less" scoped>
.box3 {
  background: #fff;
  width: 100%;
  
  .warp {
    width: 98%;
    margin: 0 auto;
    background: #fff;
    .content {
      width: 100%;
      margin: 0.1rem 0rem;
      // background: red;
      position: relative;
      .yuan1 {
        width: 1rem;
        height: 1rem;
        background: pink;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }

        .shijian {
          display: block;
          float: right;
          font-size: 14px;
          position: absolute;
          top: 0.3rem;
          right: 0.1rem;
        }
      }
      .text {
        width: 3.5rem;
        height: 1rem;
        font-size: 14px;
        overflow: hidden;

        p {
          margin: 0.1rem 0;
          text-overflow: ellipsis;
          display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
          -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          -webkit-line-clamp: 2; /** 显示的行数 **/
          overflow: hidden; /** 隐藏超出的内容 **/
        }
      }
      .big {
        width: 100%;
        height: 7rem;
        .big-img1:nth-child(2) {
          margin-right: 0rem;
        }
        .big-img1:nth-child(3) {
          margin-top: 0.2rem;
        }
        .big-img1:nth-child(4) {
          margin-top: 0.2rem;
          margin-right: 0rem;
        }
        .big-img1 {
          float: left;
          width: 48.5%;
          height: 48.5%;
          background: yellowgreen;
          margin-right: 0.2rem;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .Icon {
        width: 100%;
        height: 1rem;
        position: relative;
            .add{
            width: 1rem;
            height: 1rem;
            background: rgb(254, 217, 6);
            border-radius: 50%;
            margin-left: 3.1rem;
            margin-top: 0.2rem;
            margin-bottom: 0.1rem;
            text-align: center;
            .jia{
            line-height: 1rem;
             font-size: 0.5rem;
            }
         
      }
        .IconXin {
          font-size: 0.6rem;
          position: absolute;
          top: 0.1rem;
          right: 2rem;
          color: red;
        }
        .IconXin-p1 {
          font-size: 14px;
          color: #666;
          position: absolute;
          top: 0.2rem;
          right: 1.4rem;
        }
        .IconPinglun-p2 {
          font-size: 14px;
          color: #666;
          position: absolute;
          top: 0.2rem;
          right: 0.1rem;
        }
        .IconPinglun {
          font-size: 0.6rem;
          position: absolute;
          top: 0.1rem;
          right: 0.5rem;
          color: #666;
        }
      }
      .aothers {
        position: absolute;
        top: 0.1rem;
        left: 1.6rem;
        font-size: 14px;
        color: #333;
      }
      .citys {
        font-size: 12px;
        color: #666;
        position: absolute;
        top: 0.6rem;
        left: 1.6rem;
      }
    }
    .kong {
      height: 2rem;
    }
  }
}
</style>